{% extends 'base.html' %}
{% load staticfiles %}
{% block css %}
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'plugins/datatable/css/dataTables.bootstrap.min.css' %}">
{% endblock %}
{% block js %}
    <script src="{% static 'plugins/datatable/js/jquery.dataTables.js' %}"></script>
    <script src="{% static 'plugins/datatable/js/dataTables.bootstrap.min.js' %}"></script>
    <script >
        $(function () {
            // datatable js 配置
            var dom = '<"col-xs-6 left-col-side"<"toolbar">><"col-xs-6 right-col-side"f>t<"col-xs-6 left-col-side"l><"col-xs-6 right-col-side"p>r';
            var tb_events = $('#tb_events').DataTable({
                "dom": dom,
                "autoWidth": true,
                "searching": true,
                "language": {
                 "lengthMenu": "每页 _MENU_ 条记录",
                 "zeroRecords": "没有找到记录",
                 "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                 "infoEmpty": "无记录",
                 "infoFiltered": "(从 _MAX_ 条记录过滤)",
                 "paginate": {
                      "next": "下一页",
                      "previous": "上一页",
                      "first": "首页",
                      "last": "尾页"
                    }
                 }
            });
            var toolstr = "<button type='button' class='btn btn-primary btn-sm events_refresh'><i class='fa fa-refresh'></i> 刷新记录</button>"
            $("div.toolbar").html(toolstr);
            // datatable js end
            // 按钮事件绑定
            initDataTable();
            $('#tb_events').on( 'draw.dt', function () {
                initDataTable();
            } );

            $('.events_refresh').on('click', function () {
                window.location.href = "{% url 'managerapp:events_list' %}"
            });
        })

        function initDataTable() {
            $('.pic-detail-in').on('click', function () {
                var in_pic = $(this).data('in-pic');
                layer.open({
                  type: 2,
                  title: '进库图片',
                  shadeClose: true,
                  shade: 0.8,
                  area: ['725px', '640px'],
                  content: 'media/' +in_pic,
                });
            });
            $('.pic-detail-out').on('click', function () {
                var out_pic = $(this).data('out-pic');
                layer.open({
                  type: 2,
                  title: '出库图片',
                  shadeClose: true,
                  shade: 0.8,
                  area: ['725px', '640px'],
                  content: '/media/' + out_pic,
                });
            });
        }
    </script>
{% endblock %}
{% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        业务明细
      </h1>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">VIP车库业务明细表</h3>
            <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
             <table id="tb_events" class="table table-hover table-bordered">
                <thead>
                   <th>序号</th>
                   <th>车牌号</th>
                   <th>进库时间</th>
                   <th>出库时间</th>
                   <th>操作</th>
                <tbody>
                    {% for events in vipevents_list %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{ events.card_num }}</td>
                        <td>{{ events.in_timer|date:'Y-m-d H:i' }}</td>
                        <td>{{ events.out_timer|date:'Y-m-d H:i'  }}</td>
                        <td><a href='javascript:void(0);' class='btn btn-default btn-sm pic-detail-in'
                               data-in-pic='{{ events.in_pic}}'
                            data-toggle='tooltip' data-placement='top' title='进库图片查看'>
                            <i class='fa fa-eye' title='进库图片查看' ></i>
                            </a>
                            <a href='javascript:void(0);' class='btn btn-default btn-sm pic-detail-out'
                               data-out-pic='{{ events.out_pic}}'
                            data-toggle='tooltip' data-placement='top' title='出库图片查看'>
                            <i class='fa fa-eye' title='出库图片查看' ></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
    </section>
    <!-- /.content -->
  </div>
{% endblock %}